/**
 * 获取网络数据
 * 动态渲染
 * tab切换 放大镜
 * 
 */

//获取id
function getId() {
    let url = location.href
    console.log('url==', url)
    //http://127.0detail.html?id=113931467
    //获取索引号
    let index = url.indexOf('?')
    //字符串的截取
    let str = url.substring(index + 1)
    //转化为 数组
    let arr = str.split('=')
    console.log(arr)
    let id = arr[1]
    return id
}
let product={} //设置一个空对象
function getData() {
    //  获取网络数据
    let id = getId()
    $.ajax({

        url: 'https://www.xiongmaoyouxuan.com/api/detail?',
        type: 'get',
        data: {
            id
        },
        success: function (res) {
            showData(res.data.detail)
            product={

            }
            // console.log(res.data.detail)
        },
        error: function (error) {
            console.log(error)
        }
    })

}
getData()
//动态渲染数据
function showData(product) {

    let str = `
        <div class="left" >
           <div class="up">
           <div class="mask"></div>
                <img src="${product.photo[0].url}"alt="">
                <img src="${product.photo[1].url}"alt="">
                <img src="${product.photo[2].url}"alt="">
                <img src="${product.photo[3].url}"alt="">
                <img src="${product.photo[4].url}"alt="">
                <img src="${product.photo[0].url}"alt="">
                </div>
            <div class="tab">
                <div class="active"> <img src="${product.photo[0].url}"alt=""></div>
                <div> <img src="${product.photo[1].url}"alt=""></div>
                <div> <img src="${product.photo[2].url}"alt=""></div>
                <div> <img src="${product.photo[3].url}"alt=""></div>
                <div> <img src="${product.photo[4].url}"alt=""></div>
          </div>
        </div>
        <div class="right">
                <div class="top">
                【烈儿专享】英氏奶瓶果蔬清洗剂婴儿玩具清洗液宝宝专用洗奶瓶液
                </div>
                <div class="center">
                <p>原价¥14.9</p>
                <p>券后价: ¥39 <span>10元卷</span>  3.0万人已买</p>
                </div>
                <div class="bottom">
                <div class="cart1"><button>加入购物车</button>  </div>
                <div class="cart2"><button>立即购买</button></div>             
                </div>
        </div>
        <div class="glass">
        <img src="${product.photo[0].url}"alt="">
        
        </div>`


    $('.detail').html(str)
    onTab()
    onGlass()
}


//tab切换
/**设置样式  注意 元素要选对  末尾加一个第一张图片
 * 清除样式
 * 设置点击样式  
 */
function onTab() {
    $('.detail .left .tab div').mouseover(function () {
        $('.detail .left .up img').removeClass('on')
        $('.detail .left .tab div').removeClass('active')
        $(this).addClass('active')
        let index = $(this).index()
        $('.detail .left .up img').eq(index).addClass('on')
        //背景图随 tab 切换而一起变化 
        let url = $('.detail .left .tab div img').eq(index).attr('src')
        // let url=$(this).find('img').prop('src')  //两种方法均可
        console.log(url)

        $('.detail .glass>img').attr('src', url)

        console.log(index)
    })
}
// 放大镜

function onGlass() {
    //移入移出事件
    $('.detail .left .up').mouseover(function () {
        $('.detail .left .up .mask').css('display', 'block')
        $('.detail .glass').css('display', 'block')
    })
    //移出事件
    $('.detail .left .up').mouseout(function () {
        $('.detail .left .up .mask').css('display', 'none')
        $('.detail .glass').css('display', 'none')
    })
    //mask移动
    $('.detail .left .up').mousemove(function (e) {
        e = e || window.event
        let x = e.offsetX - $('.detail .mask').width() / 2
        let y = e.offsetY - $('.detail .mask').height() / 2
        if (x < 0) x = 0
        if (x > $('.detail .up').width() - $('.detail .mask').width()) {
            x = $('.detail .up').width() - $('.detail .mask').width()
        }
        if (y < 0) y = 0
        if (y > $('.detail .up').height() - $('.detail .mask').height()) {
            y = $('.detail .up').height() - $('.detail .mask').height()
        }
        $('.detail .mask').css({
            top: y,
            left: x
        })
        //1.背景图尺寸
        let bgW = $('.detail .glass').width() * $('.detail .left .up').width() /
            $('.detail .mask').width()
        let bgH = $('.detail .glass').height() * $('.detail .left .up').height() /
            $('.detail .mask').height()
        $('.detail .glass img').css({
            width: bgW,
            height: bgH
        })
        console.log(bgH, bgW)
        //2.背景图移动距离
        /** 
         * mask   maskM
         * ---- = ------
         * glass   bgM
         */
        let moveX = x * $('.detail .glass').width() / $('.detail .mask').width()
        let moveY = y * $('.detail .glass').height() / $('.detail .mask').height()
        $('.detail .glass img').css({
            top: -moveY,
            left: -moveX
        })
    })
}
//加入购物车
/**
 * 判断 添加的数组是否存在 localstorage中 有就数量加1  没有就添加到新数组
 * 
 */
function addCart(){
    
}


//点击立即购买 跳转到 购物车  注意localstorage的使用